<template>
    <div>
        <el-card class="filter-container" shadow="never">
            <div>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
                <el-button
                    style="float:right"
                    type="primary"
                    @click="handleSearchList()"
                    size="small">
                    查询搜索
                </el-button>
                <el-button
                    style="float:right;margin-right: 15px"
                    @click="handleResetSearch()"
                    size="small">
                    重置
                </el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
                    <el-form-item label="输入搜索：">
                        <el-input v-model="listQuery.order_number" class="input-width" placeholder="订单编号"></el-input>
                    </el-form-item>
                    <el-form-item label="收货人：">
                        <el-input v-model="listQuery.teleNumber" class="input-width" placeholder="收货人手机号码"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="operate-container" shadow="never">
            <el-tabs v-model="activeName">
                <el-tab-pane label="待付款" name="待付款"></el-tab-pane>
                <el-tab-pane label="待发货" name="待发货"></el-tab-pane>
                <el-tab-pane label="待收货" name="待收货"></el-tab-pane>
                <el-tab-pane label="待评价" name="待评价"></el-tab-pane>
                <el-tab-pane label="已完成" name="已完成"></el-tab-pane>
            </el-tabs>
        </el-card>
        <div class="table-container">
            <el-table ref="orderTable"
                :data="list"
                @selection-change="handleSelectionChange"
                style="width: 100%;"
                border>
                <el-table-column
                    type="selection"
                    width="50"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="order_number"
                    label="订单号"
                    width="100"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="consignee"
                    label="收货人"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="teleNumber"
                    label="收货电话"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="收货地址"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="totalPrice"
                    label="订单金额"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="订单状态"
                    align="center">
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="handleViewOrder(scope.$index, scope.row)"
                        >查看订单</el-button>
                        <el-button
                            type="primary"
                            size="mini"
                            v-if="scope.row.billStatus !== 5"
                            @click="handleCloseOrder(scope.$index, scope.row)">
                            关闭订单
                        </el-button>
                        <el-button
                            type="primary"
                            size="mini"
                            v-if="scope.row.billStatus === 2"
                            @click="handleDeliveryOrder(scope.$index, scope.row)">
                            订单发货
                        </el-button>
                        <el-button
                            type="danger"
                            size="mini"
                            v-if="scope.row.billStatus === 5"
                            @click="handleDeleteOrder(scope.$index, scope.row)">
                            删除订单
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-select
                size="small"
                v-model="operateType" placeholder="批量操作">
                <el-option
                    :disabled="item.disabled"
                    v-for="item in operateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-button
                style="margin-left: 20px;margin-right: 450px;"
                class="search-button"
                @click="handleBatchOperate()"
                type="primary"
                size="small">
                确定
            </el-button>
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize"
                :page-sizes="[5,10,15]"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { formatDate } from '@/common/date'
    const listQuery = {
        pageNum: 1,
        pageSize: 5,
        order_number: null,
        teleNumber: null,
        status: '',
        billStatus: ''
    }
    export default {
        data () {
            return {
                list: [
                ],
                listQuery: {
                    pageNum: 1,
                    pageSize: 5,
                    order_number: null,
                    teleNumber: null,
                    status: '',
                    billStatus: ''
                },
                total: 0,
                statusMap: {
                    '待付款': 1,
                    '待发货': 2,
                    '待收货': 3,
                    '待评价': 4,
                    '已完成': 5
                },
                activeName: '待付款',
                operateOptions: [
                    {
                        label: '批量发货',
                        value: 1,
                        disabled: true
                    },
                    {
                        label: '关闭订单',
                        value: 2,
                        disabled: false
                    },
                    {
                        label: '删除订单',
                        value: 3,
                        disabled: true
                    }
                ],
                operateType: '',
                config: {
                    theme: 'success',
                    message: ''
                },
                multipleSelection: []
            }
        },
        watch: {
            activeName (newval, oldval) {
                this.operateType = ''
                this.getOrderList()
                this.operateOptions[0].disabled = true
                this.operateOptions[1].disabled = true
                this.operateOptions[2].disabled = true
                if (newval === '待付款') {
                    this.operateOptions[1].disabled = false
                } else if (newval === '待发货') {
                    this.operateOptions[0].disabled = false
                    this.operateOptions[1].disabled = false
                } else if (newval === '待收货') {
                    this.operateOptions[1].disabled = false
                } else if (newval === '待评价') {
                    this.operateOptions[1].disabled = false
                } else {
                    this.operateOptions[2].disabled = false
                }
            }
        },
        created () {
            this.getOrderList()
        },
        methods: {
            async getOrderList () {
                this.listQuery.status = this.statusMap[this.activeName]
                const a = this.listQuery.status
                this.$set(this.listQuery, 'billStatus', a.toString())
                this.list = []
                this.$http.post('/admin/findbills/', this.listQuery).then(res => {
                    console.log(res)
                    this.total = res.data.total
                    res.data.list.forEach(item => {
                        item.submitTime = this.formatTime(item.submitTime)
                        this.$set(item, 'status', item.statusMapper[item.billStatus])
                        this.$set(item, 'address', this.formatAddress(item))
                    })
                    this.list = res.data.list
                })
            },
            formatAddress (order) {
                let str = order.address_province
                if (order.receiverCity != null) {
                    str += ' ' + order.address_city
                }
                str += ' ' + order.address_county
                str += ' ' + order.address_location
                return str
            },
            formatTime (time) {
                if (time === null || time === '') {
                    return ''
                }
                const date = new Date(time)
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            },
            handleViewOrder (index, row) {
                this.$router.push({
                    name: 'orderdetail',
                    query: {
                        orderid: row.order_number
                    }
                })
            },
            handleSizeChange (val) {
                this.listQuery.pageNum = 1
                this.listQuery.pageSize = val
                this.getOrderList()
            },
            handleCurrentChange (val) {
                this.listQuery.pageNum = val
                this.getOrderList()
            },
            handleSearchList () {
                this.listQuery.pageNum = 1
                this.listQuery.pageSize = 5
                this.getOrderList()
            },
            handleResetSearch () {
                this.listQuery = Object.assign({}, listQuery)
                this.getOrderList()
            },
            handleCloseOrder (index, row) {
                const self = this
                this.$bkInfo({
                    title: '确认要关闭？',
                    confirmLoading: true,
                    confirmFn: async () => {
                        try {
                            await new Promise(resolve => {
                                setTimeout(() => {
                                    resolve('成功')
                                }, 1000)
                            })
                            self.CloseOrder(index, row)
                            return true
                        } catch (e) {
                            return false
                        }
                    }
                })
            },
            CloseOrder (index, row) {
                const data = {
                    order_number: row.order_number,
                    billStatus: 6
                }
                this.$http.post('/admin/alterBill/', data).then(res => {
                    if (res.data === true) {
                        this.config.theme = 'success'
                        this.config.message = '关闭成功'
                        this.getOrderList()
                    } else {
                        this.config.theme = 'error'
                        this.config.message = '关闭失败'
                    }
                    this.$bkMessage(this.config)
                })
            },
            handleDeliveryOrder (index, row) {
                const self = this
                this.$bkInfo({
                    title: '确认要发货？',
                    confirmLoading: true,
                    confirmFn: async () => {
                        try {
                            await new Promise(resolve => {
                                setTimeout(() => {
                                    resolve('成功')
                                }, 1000)
                            })
                            self.DeliveryOrder(index, row)
                            return true
                        } catch (e) {
                            return false
                        }
                    }
                })
            },
            DeliveryOrder (index, row) {
                // const time = new Date()
                const data = {
                    order_number: row.order_number,
                    deliveryTime: new Date(),
                    billStatus: 3
                }
                this.$http.post('/admin/alterBill/', data).then(res => {
                    if (res.data === true) {
                        this.config.theme = 'success'
                        this.config.message = '发货成功'
                        this.getOrderList()
                    } else {
                        this.config.theme = 'error'
                        this.config.message = '发货失败'
                    }
                    this.$bkMessage(this.config)
                })
            },
            handleDeleteOrder (index, row) {
                const self = this
                this.$bkInfo({
                    title: '确认要删除？',
                    confirmLoading: true,
                    confirmFn: async () => {
                        try {
                            await new Promise(resolve => {
                                setTimeout(() => {
                                    resolve('成功')
                                }, 1000)
                            })
                            self.DeleteOrder(index, row)
                            return true
                        } catch (e) {
                            return false
                        }
                    }
                })
            },
            DeleteOrder (index, row) {
                this.$http.get('/bill/deleteOrder/', { params: { order_number: row.order_number } }).then(res => {
                    console.log(res)
                    if (res.data.result === true) {
                        this.config.theme = 'success'
                        this.config.message = '删除成功'
                        this.getOrderList()
                    } else {
                        this.config.theme = 'error'
                        this.config.message = '删除失败'
                    }
                    this.$bkMessage(this.config)
                })
            },
            handleSelectionChange (val) {
                this.multipleSelection = val
            },
            handleBatchOperate () {
                if (this.multipleSelection === null || this.multipleSelection.length < 1) {
                    this.$message({
                        message: '请选择要操作的订单',
                        type: 'warning',
                        duration: 1000
                    })
                    return 0
                }
                let flag = false
                if (this.operateType === 1) { // 批量发货
                    this.multipleSelection.some((val, index, item) => {
                        const data = {
                            order_number: val.order_number,
                            deliveryTime: new Date(),
                            billStatus: 3
                        }
                        this.$http.post('/admin/alterBill/', data).then(res => {
                            if (res.data !== true) {
                                flag = true
                            }
                        })
                        if (flag) {
                            this.config.theme = 'error'
                            this.config.message = '发货遇到问题'
                        }
                        console.log('flag', flag)
                        return flag
                    })
                    if (!flag) {
                        this.config.theme = 'success'
                        this.config.message = '发货成功'
                    }
                    this.getOrderList()
                    this.$bkMessage(this.config)
                }
                if (this.operateType === 2) { // 批量关闭
                    this.multipleSelection.some((val, index, item) => {
                        const data = {
                            order_number: val.order_number,
                            billStatus: 5
                        }
                        this.$http.post('/admin/alterBill/', data).then(res => {
                            if (res.data !== true) {
                                flag = true
                            }
                        })
                        if (flag) {
                            this.config.theme = 'error'
                            this.config.message = '关闭遇到问题'
                        }
                        return flag
                    })
                    if (!flag) {
                        this.config.theme = 'success'
                        this.config.message = '关闭成功'
                    }
                    this.getOrderList()
                    this.$bkMessage(this.config)
                }
                if (this.operateType === 3) { // 批量删除
                    this.multipleSelection.some((val, index, item) => {
                        this.$http.get('/admin/alterBill/', { params: { order_number: val.order_number } }).then(res => {
                            if (res.data !== true) {
                                flag = true
                            }
                        })
                        if (flag) {
                            this.config.theme = 'error'
                            this.config.message = '删除遇到问题'
                        }
                        return flag
                    })
                    if (!flag) {
                        this.config.theme = 'success'
                        this.config.message = '删除成功'
                    }
                    this.getOrderList()
                    this.$bkMessage(this.config)
                }
            }
        }
    }
</script>

<style scoped>
.pagination-container {
    margin-top: 10px;
    display: inline-flex;
    /*float: right;*/
}
.input-width {
    width: 203px;
}
  
</style>
